<template>
    <div id="detail">
            <!--        导航栏-->
        <nav-bar class="detail-nav-bar">
            <div slot="left" @click="backHome">
                <img src="../../assets/img/back.png" alt="" class="back">
            </div>
            <div slot="center" class="center">
                <div v-for="(item,index) in title" :key="index" class="item">
                    <div :class="{nav_bar_active:index === currentindex}" @click="itemClick(index)">{{item}}</div>
                </div>
            </div>
        </nav-bar>
        <scroll class="detail_scroll" ref="scroll" @scroll="getPosition" :probe-type="3">
            <!--        轮播图-->
            <detail-swipe :message="goods.images"/>
            <!--        商品信息展示-->
            <base-info :message="goods"/>
            <!--        店铺信息-->
            <detail-shop :message="shop"/>
            <!--        商品展示-->
            <good-display :message="detailInfo" @imgLoad="imgLoad"/>
            <!--        商品参数展示-->
            <good-params :message="goodParams" ref="params"/>
            <!--        评论页面-->
            <detail-comment :message="comment" ref="comment"/>
            <!--        推荐商品-->
            <detail-goods-list :message="recommend" ref="good_list" />
        </scroll>
        <back-top @click.native="backTop" v-show="isShow"></back-top>
            <!--        底部按钮-->
        <detail-bar @addShopCar="addShopCar"/>
    </div>
</template>

<script>
    import NavBar from "../../components/common/navbar/NavBar";
    import DetailSwipe from "./childComponent/DetailSwipe";
    import BaseInfo from "./childComponent/BaseInfo";
    import DetailShop from "./childComponent/DetailShop";
    import Scroll from "../../components/common/scroll/Scroll";
    import GoodDisplay from "./childComponent/GoodDisplay";
    import GoodParams from "./childComponent/GoodParams";
    import DetailComment from "./childComponent/DetailComment";
    import DetailGoodsList from "./childComponent/DetailGoodsList";
    import BackTop from "../../components/common/BackTop";
    import DetailBar from "./childComponent/DetailBar";
    import {ADD_PRODUCT} from "../../store/mutation-type";

    import {getDetailsData,getRecommend,Goods,Shop,Params,debounce} from "../../network/details";

    export default {
        name: "Detail",
        components:{
            NavBar,
            DetailSwipe,
            BaseInfo,
            DetailShop,
            Scroll,
            GoodDisplay,
            GoodParams,
            DetailComment,
            DetailGoodsList,
            BackTop,
            DetailBar
        },
        data(){
            return{
                title:['商品','参数','评论','推荐'],
                data:{},
                goods:[],
                shop:{},
                detailInfo:{},
                goodParams:{},
                comment:{},
                recommend:[],
                currentindex:0,
                position:[],
                debouncePosition:null,
                isShow:false
            }
        },
        created() {
            getDetailsData(this.$route.query.id).then(res =>{
                 this.data = res.data.result;
                // console.log(this.data);
                //获取商品信息
                this.goods = new Goods(this.data.itemInfo,this.data.columns,this.data.shopInfo.services);
                // console.log(this.goods);
                //获取商店信息
                this.shop = new Shop(this.data.shopInfo);
                // console.log(this.shop);
                //获取商品的展示图片
                this.detailInfo =this.data.detailInfo;
                //获取商品的参数
                this.goodParams = new Params(this.data.itemParams.info,this.data.itemParams.rule);
                //获取评论数据
                this.comment = this.data.rate
            });
            getRecommend().then(res => {
                // console.log(res.data.data.list);
                this.recommend = res.data.data.list;
            });
            this.debouncePosition = debounce(() => {
                this.$refs.scroll.scroll.refresh();
                this.position = [];
                this.position.push(0);
                this.position.push(this.$refs.params.$el.offsetTop);
                this.position.push(this.$refs.comment.$el.offsetTop);
                this.position.push(this.$refs.good_list.$el.offsetTop);
                this.position.push(Number.MAX_VALUE);
                // console.log(this.position)
            },500)
        },
        methods:{
            //返回主页
            backHome(){
                this.$router.back()
            },
            imgLoad(){
              this.debouncePosition()
            },
            itemClick(index){
                this.currentindex = index;
                this.$refs.scroll.scroll.scrollTo(0,-this.position[index],200);
                // console.log(index,this.position[index])
            },
            getPosition(position){
                for (let i = 0;i < this.position.length-1;i++){
                   if ( this.currentindex !== i && -position.y >= this.position[i] && -position.y < this.position[i+1]){
                       this.currentindex = i
                   }
                }
                this.isShow = -position.y > 800
            },
            backTop() {
                this.$refs.scroll.scrollTo(0, 0, 200)
            },
            //添加商品到购物车
            addShopCar(){
                const product = {};
                product.image = this.data.itemInfo.topImages[0];
                product.title = this.data.itemInfo.title;
                product.desc = this.data.itemInfo.desc;
                product.price = this.data.itemInfo.lowNowPrice;
                product.iid = this.data.itemInfo.iid;
                // console.log(product);
                this.$store.dispatch(ADD_PRODUCT,product)
            }
        },
    }
</script>

<style scoped>
    #detail{
        position: relative;
        background-color: white;
        z-index: 999;
    }
    .detail-nav-bar{
        background-color:darksalmon;
        color: white;
    }
    .detail_scroll{
        height: calc(100vh - 93px);
    }
    .center{
        display: flex;
    }
    .item{
        flex: 1;
        font-size: 12px;
    }
    .back{
        width: 18px;
        height: 18px;
        margin-top: 14px;
        margin-left: 10px;
    }
    .nav_bar_active{
        color: lightseagreen;
    }
</style>